import React, { Component } from 'react'
import { Form, Input, Button, Checkbox, message } from 'antd';

import axios from "../../util/axios"
import { RouteComponentProps } from "react-router-dom"


interface Iprops extends RouteComponentProps {
    history: any
}

const key = '登录';
export class Login extends Component<Iprops, {}> {
    openMessage = (data: any) => {
        message.loading({ content: 'Loading...', key });
        setTimeout(() => {
            message.success({ content: data, key, duration: 2 });
        }, 1000);
    };
    onFinish = (values: any) => {
        console.log('Success:', values);
        axios.post('/api/login', {
            phone: values.phone,
            password: values.password
        }).then(res => {
            console.log(res)
            if (res.data.code === 1) {
                this.openMessage(res.data.msg)
                //延时进入
                setTimeout(() => {
                    this.props.history.push('/home/classify');
                }, 1000);
                //本地存储
                localStorage.setItem('token', res.data.token)
                localStorage.setItem('username', res.data.username)
            }else{
                this.openMessage(res.data.msg)
            }
        })
    };
    onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    render() {
        return (
            <div className="login-page wrap">
                {/* <h3>登录jd</h3> */}
                <Form
                    // {...layout}
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                >
                    <Form.Item
                        label="用户"
                        name="phone"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your phone!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked">
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item>

                    <Form.Item >
                        <Button type="primary" htmlType="submit" >
                            登录
        </Button>
                        <Button htmlType="submit">
                            注册
        </Button>
                    </Form.Item>
                </Form>

            </div>
        )
    }
}

export default Login
